<template>
  <div class="box">
    <div class="icons"
         v-for="item in props.data" :key="item.name"
         :style="{backgroundImage:`url(${item.imgUrl})`}"
         @click="onClick(item.name)">
    </div>
    <dialog :open="isShow" class="dialog-theme">
      <div>
        <div class="color-list">
          <div class="color-card" v-for="i in colors" :key="i.index"
               :style="{background:`${i.color}`}"
               @click="changeColor(i.index)">
          </div>
        </div>
      </div>
    </dialog>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {useThemeStore} from "@/stores/themes";
import router from "@/router";

const props = defineProps({
  data: {
    type: Array,
    require: false,
    default: []
  }
})

const isShow = ref(false)
const colors = [{
  index: 1,
  color: 'linear-gradient(to right, #ec77ab 0%, #7873f5 100%)'
},
  {
    index: 2,
    color: 'linear-gradient(to top, #007adf 0%, #00ecbc 100%)'
  },
  {

    index: 3,
    color: 'linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%)'
  },
  {
    index: 4,
    color: 'linear-gradient(to top, #e8198b 0%, #c7eafd 100%)'
  },
  {
    index: 5,
    color: 'linear-gradient(to top, #e14fad 0%, #f9d423 100%)'
  },
  {
    index: 6,
    color: 'linear-gradient(to right, #f9d423 0%, #ff4e50 100%)'
  },
]
const changeColor = (index: number) => {
  const app = document.querySelector("#app") as HTMLDivElement
  app.style.background = colors[index - 1].color
  const store = useThemeStore()
  store.setColor(colors[index - 1].color)
  isShow.value = false
}
const onClick = (e: string) => {
  if (e === 'theme') {
    isShow.value = !isShow.value
  }
  if (e === 'setting') {
    console.log("setting");
    router.push({name: 'login'})
    // router.push({name: "/login"})
  }
}
</script>

<style lang="less" scoped>
.box {
  -webkit-app-region: no-drag; //禁止可拖拽，不然会失焦点
  margin-top: 5px;
  width: 200px;
  height: 30px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-evenly;

  .icons {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .icons:hover {
    cursor: pointer;
  }
}

.dialog-theme {
  height: 120px;
  top: 35px;
  width: 100%;
  z-index: 1000;
  background: url("@/assets/icons/transparent-big.png") rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 10px;

  .color-list {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;

    .color-card {
      width: 40px;
      height: 40px;
      border-radius: 50px;
      border: 1px solid white;
      background: #7DE2FC;
    }

    .color-card:hover {
      transition: 0.5s all ease;
      transform: scale(1.2);
    }
  }
}
</style>